<template lang='pug'>
.pie(:style="stylePie")
    .pie_shape(:style="styleCircle")
      .pie_txt_center {{inf.count}}
    .pie_txt_root {{inf.label+'/'+inf.unit}}
</template>
<script>
export default {
    props:{
        bkColor:{default:'rgba(125,125,125,0.5)'},
        color:{default:'rgb(255, 234, 152)'},
        w:{default:40},
        x:{default:100},
        y:{default:100},
        inf:{default:{color:'',count:10,label:'企业数量',unit:'个'}}
    },
    computed:{
        stylePie(){
            return {
                left:this.x+'px',
                top:this.y+'px',
                background:this.bkColor
            }
        },
        styleCircle(){
            let style={
                width:this.w+'px',
                height:this.w+'px',
                'border-radius':(this.w/2+4)+'px',
            }
            style[`border-color`]=this.inf.color
            return style
        }
    },
    methods:{

    }
}
</script>
<style lang="scss" scoped>
.pie{
    width: 70px;
    height: 100px;
    line-height: 40px;
    font-size: 26px;
    .pie_shape{
      border:4px solid rgb(255, 234, 152);
    }
    .pie_txt_root{
      line-height: 20px;
      font-size: 12px;
    }
}

</style>